<template>
  <div class="scroller" ref="scroller">
    <div class="container">
      <slot />
      <div v-if="!end" class="loading-text">{{loadingText}}</div>
      <div v-if="end" class="load-over-text">{{loadOverText}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    loadingText: {
      default: '正在加载中...',
    },
    loadOverText: {
      default: '没有更多商品信息了',
    },
  },
  data() {
    return {
      loading: false,
      finished: false,
      end: false,
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    refresh() {
      this.scroller = this.$refs.scroller
      this.clientHeight = this.scroller.clientHeight
      this.scroller.onscroll = (event) => {
        if (this.loading) return
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.scroll()
        }, 100)
      }
    },
    scroll() {
      if (
        this.scroller.scrollHeight -
          this.clientHeight -
          this.scroller.scrollTop <=
        200
      ) {
        this.loading = true
        this.load()
      }
    },
    load() {
      this.$emit('load')
    },
    canLoad() {
      this.loading = false
    },
    loadOver() {
      this.end = true
    },
  },
}
</script>

<style lang="less" scoped>
.scroller {
  height: 100%;
  width: 100%;
  overflow: scroll;

  .container {
    .loading-text {
      padding: 10px 0;
      color: #333;
      text-align: center;
    }
    .load-over-text {
      padding: 10px 0;
      color: #333;
      text-align: center;
    }
  }
}
</style>